import React, { useEffect, useState } from "react";
import "./style.css";
import { Card, Select, Input, Button, Table, message } from "antd";
import { getBrokerList } from "../../../store/broker";
import { BrokerType, ColumsType, StoreStateType } from "../../../interface";
import { useSelector } from "react-redux";
import { apiBrokerDel } from "../../../api";

const { Option } = Select;

const Broker = () => {
  // 所有数据
  const brokerData = useSelector(
    (state: StoreStateType) => state.PublicReducer.brokerList
  );

  //删除
  const handleDelete = (id: number) => {
    apiBrokerDel({ id }).then((res: any) => {
      if (res.code === 200) {
        message.success(res.mess);
        getBrokerList();
      }
    });
  };


  const brokerColumns: ColumsType[] = [
    {
      title: "序号",
      width: 150,
      dataIndex: "id",
      key: "id",
      fixed: "left",
    },
    {
      title: "姓名",
      dataIndex: "name",
      width: 200,
      key: "name",
    },
    {
      title: "手机号",
      dataIndex: "tel",
      width: 200,
      key: "tel",
    },
    {
      title: "公司",
      dataIndex: "company",
      width: 200,
    },
    {
      title: "新房",
      dataIndex: "new_house",
      width: 200,
      
    },
    {
      title: "二手房",
      dataIndex: "second_hand_house",
      width: 200,
      key: "second_hand_house",
    },
    {
      title: "租房",
      dataIndex: "renting",
      width: 200,
      key: "renting",
    },
    {
      title: "状态",
      dataIndex: "state",
      width: 200,
      key: "state",
      // render: (v: BrokerType) => {
      //   return <div>{v ? <span>启用</span> : <span>禁用</span>}</div>;
      // },
    },
    {
      title: "操作",
      fixed: "right",
      width: 350,
      render: (v: BrokerType) => {
        return (
          <div style={{ display: "flex" }}>
            <Button type="link">
              编辑
            </Button>
            <Button type="link" onClick={() => handleDelete(v.id)}>
              删除
            </Button>
            <Button type="link">
              启用
            </Button>
            <Button type="link">
              禁用
            </Button>
          </div>
        );
      },
    },
  ];

  useEffect(() => {
    // 获取列表数据
    getBrokerList();
  }, []);

  const [value, setValue] = useState("");
  const changeState = (value: string) => {
    setState(value);
  };
  const [state, setState] = useState("");
  // 搜索
  const searchTable = () => {
    getBrokerList({
      value,
      state,
    });
  };

  return (
    <div className="brokerbox">
      <Card style={{ width: 1670 }}>
        <div className="brokersanji">

        <div className="brokerinp">
            <span>搜索</span>
            <Input
              placeholder="请输入用户名/手机号"
              style={{ width: 300 }}
              value={value}
              onChange={(e) => setValue(e.target.value)}
            ></Input>
          </div>

          <div className="brokerzt">
            <span>状态：</span>
            <Select value={state} style={{ width: 180 }} onChange={changeState}>
              <Option value="在职">在职</Option>
              <Option value="离职">离职</Option>
            </Select>
          </div>
         

          <div>
            <Button type="primary" style={{ width: 200 }} onClick={searchTable} className='brokerchaxun'>
              查询
            </Button>

            <Button type="primary" style={{ width: 200 }} className="brokerxinzen">
              新增
            </Button>
          </div>
        </div>
      </Card>

      <Card style={{ width: 1670 }} className="brokerbody">
        <Table
          columns={brokerColumns}
          dataSource={brokerData}
          className="brokertab"
        />
      </Card>
      
    </div>
  );
};
export default Broker;

